import React from 'react';
import Screen from '../Base/Screen';
import {Icon, message, Upload} from 'antd';
import CommonUtil from "../../utils/CommonUtil";
import Api from "../../configs/Api";
import RectTip from "../RectTip";


class BannerUpload extends Screen {
    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            videoPolicyData: {},
            value: props.value || '',
        };
    }

    async componentDidMount() {
        let getPolicyReq = await this.request(Api.UPLOAD_POLICY, {}, false);
        if (getPolicyReq.status !== 0) {
            CommonUtil.toast(getPolicyReq.msg);
            return false;
        } else {
            this.setState({videoPolicyData: getPolicyReq.data});
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({value: nextProps.value})
    }

    beforeUpload = async (file) => {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJPG) {
            message.error('只支持JPG、PNG，大小不超过3M');
            return;
        }
        const isLt2M = file.size / 1024 / 1024 < 3;
        if (!isLt2M) {
            message.error('只支持JPG、PNG，大小不超过3M');
            return;
        }

        let fileKeyReq = await this.request(Api.UPLOAD_FILE_KEY, {filename: file.name}, false);
        if (fileKeyReq.status !== 0) {
            CommonUtil.toast(fileKeyReq.msg);
            return false;
        }

        let policyData = this.state.videoPolicyData;
        policyData.key = fileKeyReq.data;
        this.setState({videoPolicyData: policyData});
    };

    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            console.log('uploading', info.file, info.fileList);
            this.setState({loading: true});
        } else if (info.file.status === 'done') {
            let resp = info.file.response;
            console.log('done', resp);

            if (resp.status !== 0) {
                message.error(`${info.file.name} 文件上传失败`);
            } else {
                this.setState({
                    value: resp.data,
                    loading: false,
                }, () => {
                    this.props.onChange(this.state.value);
                });
            }
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 文件上传失败`);
        }
    };

    render() {
        const uploadButton = (
            <div>
                <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const imageUrl = this.state.value;
        return (
            <div>
                <Upload
                    name="file"
                    listType={imageUrl ? "picture" : "picture-card"}
                    className="avatar-uploader"
                    accept={'.png,.jpg,.jpeg'}
                    showUploadList={false}
                    data={this.state.videoPolicyData}
                    action={this.state.videoPolicyData.host}
                    beforeUpload={this.beforeUpload}
                    onChange={this.handleChange}
                >
                    {imageUrl ? <img style={{width: '50%'}} src={imageUrl} alt="banner"/> : uploadButton}
                </Upload>

                <RectTip tip={this.props.tip} noBorder={true}/>
            </div>
        )
    }
}

export default BannerUpload;
